<template>
  <el-card>
    <el-input v-model="listParam.name" placeholder="请输入名称" style="width: 300px" clearable></el-input>
    <el-select v-model="listParam.pid" clearable @change="pidChange">
      <el-option v-for="(item, index) in pData" :key="index" :label="item.name" :value="item._id"></el-option>
    </el-select>
    <el-select v-model="listParam.cid" clearable @change="cidChange">
      <el-option v-for="(item, index) in cData" :key="index" :label="item.name" :value="item._id"></el-option>
    </el-select>
    <el-button type="primary" @click="addGood()">添加商品</el-button>
    <el-button type="primary" @click="cidChange()">查询商品</el-button>
    <el-table :data="tableData" stripe border style="margin-top: 20px">
      <el-table-column prop="name" label="商品名称">
      </el-table-column>
      <el-table-column prop="pName" label="一级分类">
      </el-table-column>
      <el-table-column prop="cName" label="二级分类">
      </el-table-column>
      <el-table-column prop="des" label="备注">
      </el-table-column>
      <el-table-column label="讲解视频">
        <template slot-scope="scope">
          <view v-for="(item, index) in scope.row.url" :key="index" @tap="showVideo(item)" class="video_txt">
            {{item}}
          </view>  
        </template>
      </el-table-column>
      <el-table-column label="抖音价格">
        <template slot-scope="scope">
          <view v-for="(item, index) in scope.row.dy_price" :key="index">
            {{item.name}}--{{item.price}}
          </view>  
        </template>
      </el-table-column>
      <el-table-column label="供应链价格">
        <template slot-scope="scope">
          <view v-for="(item, index) in scope.row.chain_price" :key="index">
            {{item.name}}--{{item.price}}
          </view>  
        </template>
      </el-table-column>
      <el-table-column label="京东价格">
        <template slot-scope="scope">
          <view v-for="(item, index) in scope.row.duoduo_price" :key="index">
            {{item.name}}--{{item.price}}
          </view>  
        </template>
      </el-table-column>
      <el-table-column prop="_add_time_str" label="添加时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog :visible.sync="visible" destroy-on-close :title="editParam._id?'编辑分类':'添加分类'"
      :close-on-click-modal="false">
      <el-form :model="editParam" label-width="130px">
        <el-form-item label="选择一级分类">
          <el-select v-model="editParam.pid" clearable @change="cate1Change">
            <el-option v-for="(item, index) in pData_origin" :key="index" :label="item.name" :value="item._id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择二级分类">
          <el-select v-model="editParam.cid" clearable>
            <el-option v-for="(item, index) in cData_origin_1" :key="index" :label="item.name" :value="item._id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="editParam.name"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="editParam.des"></el-input>
        </el-form-item>
        <el-form-item label="讲解视频">
          <vk-data-upload v-model="editParam.url" :limit="9" upload-type="file" list-type="text" button-text="点击上传"></vk-data-upload>
        </el-form-item>
        <el-form-item label="抖音橱窗价格">
          <el-card>
            <el-button type="primary" @click="addDy()">添加价格</el-button>
            <div style="display: flex;" v-for="(item, index) in editParam.dy_price" :key="index">
              <el-input placeholder="请输入价格" v-model="item.price"></el-input>
              <el-input placeholder="请输入抖音号" v-model="item.name"></el-input>
              <el-button type="danger" @click="deleteDy(index)">删除价格</el-button>
            </div>
          </el-card>
        </el-form-item>
        <el-form-item label="供应链价格">
          <el-card>
            <el-button type="primary" @click="addChain()">添加价格</el-button>
            <div style="display: flex;" v-for="(item, index) in editParam.chain_price" :key="index">
              <el-input placeholder="请输入价格" v-model="item.price"></el-input>
              <el-input placeholder="请输入微信号" v-model="item.name"></el-input>
              <el-button type="danger" @click="deleteChain(index)">删除价格</el-button>
            </div>
          </el-card>
        </el-form-item>
        <el-form-item label="京东价格">
          <el-card>
            <el-button type="primary" @click="addDuoduo()">添加价格</el-button>
            <div style="display: flex;" v-for="(item, index) in editParam.duoduo_price" :key="index">
              <el-input placeholder="请输入价格" v-model="item.price"></el-input>
              <el-input placeholder="请输入店铺名称" v-model="item.name"></el-input>
              <el-button type="danger" @click="deleteDuoduo(index)">删除价格</el-button>
            </div>
          </el-card>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="dialogSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="visibleVideo" destroy-on-close
      :close-on-click-modal="false">
      <view style="text-align: center;">
        <video style="width: 600px;height: 600px" :src="videoSrc" controls></video>
      </view>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visibleVideo = false">取 消</el-button>
        <el-button type="primary" @click="visibleVideo=false">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        listParam: {
          pid: null,
          cid: null,
          name: '',
          pageNum: 1,
          pageSize: 100,
        },
        total: 0,
        visible:false,
        visibleVideo: false,
        videoSrc: '',
        currentPage: 1,
        tableData: [],
        pData: [],
        cData: [],
        pData_origin: [],
        cData_origin: [],
        cData_origin_1: [],
        editParam: {
          pid: null,
          pName: '',
          cid: null,
          cName: '',
          url: '',
          name: '',
          des: '',
          // 橱窗
          dy_price: [],
          // 供应链
          chain_price: [],
          // 京东
          duoduo_price: []
        }
      }
    },
    mounted() {
      this.getList()
      this.getPidCate()
      this.getCidCate()
    },
    methods: {
      showVideo(item) {
        this.videoSrc = item
        this.visibleVideo = true
      },
      getCidCate() {
        vk.callFunction({
          url: 'user/kh/cateList',
          title: '加载中...',
          data: {
            type: 2
          },
          success: (res) => {
            if (res) {
              this.cData = res.rows
               this.cData_origin = res.rows
            }
          }
        })
      },
      getPidCate() {
        vk.callFunction({
          url: 'user/kh/cateList',
          title: '加载中...',
          data: {
            type: 1
          },
          success: (res) => {
            if (res) {
              this.pData = res.rows
              this.pData_origin = res.rows
            }
          }
        })
      },
      deleteDy(index, item) {
        this.editParam.dy_price.splice(index, 1)
      },
      addDy() {
        console.log(this.editParam.dy_price, 'this.editParam.dy_price---')
        this.editParam.dy_price.push({
          price: '',
          name: ''
        })
      },
      deleteChain(index, item) {
        this.editParam.chain_price.splice(index, 1)
      },
      addChain() {
        this.editParam.chain_price.push({
          price: '',
          name: ''
        })
      },
        deleteDuoduo(index, item) {
          this.editParam.duoduo_price.splice(index, 1)
        },
        addDuoduo() {
          this.editParam.duoduo_price.push({
            price: '',
            name: ''
          })
        },
      cidChange() {
        this.pageNum = 1
        this.getList()
      },
      pidChange() {
        this.pageNum = 1
        this.getList()
        this.getCid()
      },
      // form
      getCid() {
        vk.callFunction({
          url: 'user/kh/cateList',
          title: '加载中...',
          data: {
            type: 2,
            _id: this.listParam.pid
          },
          success: (res) => {
            if (res) {
              this.cData = res.rows
            }
          }
        })
      },
      // dialog
      cate1Change() {
        console.log(this.editParam, 'this.editParam----')
        vk.callFunction({
          url: 'user/kh/cateList',
          title: '加载中...',
          data: {
            type: 2,
            _id: this.editParam.pid
          },
          success: (res) => {
            if (res) {
              this.cData_origin_1 = res.rows
            }
          }
        })
      },
      addGood() {
        this.editParam = {
          pid: null,
          pName: '',
          cid: null,
          cName: '',
          url: '',
          name: '',
          des: '',
          // 橱窗
          dy_price: [],
          // 供应链
          chain_price: [],
          // 京东
          duoduo_price: []
        }
        this.cData_origin_1 = [].concat(this.cData_origin)
        this.visible = true
      },
      handleDelete(index, row) {
        vk.confirm('确定要删除该数据吗', '提示', '确定', '取消', res => {
          if (res.confirm) {
            this.orderDelete(row)
          }
        });
      },
      dialogSubmit() {
        // 添加或者更新
        if(!this.editParam.pid) {
          return vk.toast('请选择分类','none');
        }
        if (!this.editParam.cName) {
          for (let j = 0; j < this.pData_origin.length; j++) {
            if (this.pData_origin[j]._id == this.editParam.pid) {
              this.editParam.pName = this.pData_origin[j].name
            }
          }
        }
        if(this.editParam.cid) {
          for (let i = 0; i < this.cData_origin.length; i++) {
            if (this.cData_origin[i]._id == this.editParam.cid) {
              this.editParam.cName = this.cData_origin[i].name
            }
          }
        }
        console.log(this.editParam, 'this.editParam---')
        vk.callFunction({
          url: 'user/kh/chainPost',
          title: '加载中...',
          data: this.editParam,
          success: (res) => {
            if (res) {
              this.getList()
              this.visible = false
            }
          }
        })
      },
      handleEdit(index, row) {
        this.editParam = Object.assign({}, row)
        this.visible = true
      },
      orderDelete(row) {
        vk.callFunction({
          url: 'user/kh/chainDelete',
          title: '加载中...',
          data: {
            _id: row._id
          },
          success: (res) => {
            if (res) {
              this.getList()
            }
          }
        })
      },
      handleSizeChange(val) {
        this.listPram.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listPram.pageNum = val
        this.getList()
      },
      getList() {
        vk.callFunction({
          url: 'user/kh/chainList',
          title: '加载中...',
          data: this.listParam,
          success: (res) => {
            if (res) {
              this.tableData = res.rows
              this.total = res.total
            }
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  /deep/.el-tabs__new-tab {
    margin-right: 12px !important
  }

  .width400 {
    width: 400px
  }

  .width200 {
    width: 200px
  }

  .width100 {
    width: 100px
  }
  .video_txt {
    max-width: 200px;
    color:#409EFF;
    white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
  }
  .good {
    display: flex;
    align-items: center;
    margin-top: 10px;

    &-img {
      width: 30px;
      height: 30px;
      border-radius: 4px;
    }

    &-name {
      margin-left: 10px;
    }

    &-price {
      color: #f56c6c;
      font-weight: 500;
      margin-left: 10px;
      margin-right: 10px;
    }
  }
</style>